<template>
  <jy-dialog :title="title" :visible.sync="open" width="800" append-to-body>
    <div class="header-title">
      <span>第</span>
      <el-select class="cd-ml8 cd-mr8" v-model="queryParams.qsId" placeholder="" size="mini" style="width: 60px;"
        @change="qsChange">
        <el-option v-for="item in qsOptions" :key="item.qsId" :label="item.settleIndex" :value="item.qsId"></el-option>
      </el-select>
      <span>期计量列表</span>
    </div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" @submit.native.prevent>
      <el-form-item label="站点名称" prop="zdName">
        <el-input v-model="queryParams.zdName" placeholder="请输入站点名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table border stripe ref="table" v-loading="loading" :data="dataList" tooltip-effect="dark"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="50px" :selectable="rowSelectable" />
      <el-table-column label="站点名称" align="center" prop="name" min-width="150px" show-overflow-tooltip />
      <el-table-column label="期数" align="center" prop="qs" width="80px" show-overflow-tooltip />
      <el-table-column label="合同金额" align="center" prop="htje" min-width="100px">
      </el-table-column>
      <el-table-column label="开工预付款金额" align="center" prop="kgyfkjr" min-width="120px">
      </el-table-column>
      <el-table-column label="占比（%）" align="center" prop="zb" min-width="100px">
      </el-table-column>
      <el-table-column label="扣除奖励基金" align="center" prop="kcjljj" min-width="100px">
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submit">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </jy-dialog>
</template>
<script>
import { listDataBsStartAdvance, saveBatch } from "@/api/cm/bsStartAdvance";
import { queryReportStatus } from "@/api/cm/reportForm";

export default {
  name: 'zd-select',
  props: {
    bdId: {
      type: String,
      default: ''
    },
    qsId: {
      type: String,
      default: ''
    },
    qsOptions: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      title: '站点选择',
      open: false,
      loading: false,
      buttonLoading: false,
      dataList: [],
      selection: [],
      queryParams: {
        qsId: this.qsId,
        qs: undefined
      },
      reportStatus: null
    };
  },
  created () {
  },
  mounted () {
  },
  methods: {
    init (value) {
      this.open = true;
      // this.selection = value;
      // this.getDataList();
      this.queryParams.qsId = this.qsId;
      this.qsChange();
    },
    getDataList () {
      const queryParams = {
        bdId: this.bdId,
        zdName: this.queryParams.zdName,
      };
      this.loading = true;
      listDataBsStartAdvance(queryParams).then((response) => {
        this.dataList = response.data;
        this.toggleSelection();
      }).finally(() => {
        this.loading = false;
      });
    },
    // 修改默认选中
    toggleSelection () {
      this.$nextTick(() => {
        this.dataList.forEach(row => {
          let selected = false;
          if (row.qsId == this.queryParams.qsId) {
            selected = true;
          }
          this.$refs.table.toggleRowSelection(row, selected);
        });
      });
    },
    qsChange () {
      const info = this.qsOptions.find(item => item.qsId == this.queryParams.qsId);
      this.queryParams.qs = info.settleIndex;
      this.getDataList();
      // this.getReportStatus();
    },
    // 获取报表状态 00 未审核 33 已驳回  这两个状态时可编辑
    getReportStatus () {
      if (!this.bdId || !this.queryParams.qsId) {
        return;
      }
      const query = {
        bdId: this.bdId,
        qsId: this.queryParams.qsId
      };
      queryReportStatus(query).then(res => {
        const { status } = res.data;
        this.reportStatus = status;
      });
    },
    handleSelectionChange (rows) {
      this.selection = rows.map(item => item.id);
    },
    submit () {
      if (!this.selection || this.selection.length == 0) {
        this.$message.warning('请选择站点');
        return;
      }
      // if (!this.canOperation()) {
      //   this.$message.warning('当前期数已发起审批，不可操作');
      //   return;
      // };
      const arr = this.dataList.map(item => {
        let info = item;
        if (this.selection.includes(item.id)) {
          info.qsId = this.queryParams.qsId;
          info.qs = this.queryParams.qs;
        } else if (item.qsId == this.queryParams.qsId) {
          info.qsId = null;
          info.qs = null;
        }
        return info;
      });
      this.buttonLoading = true;
      saveBatch(arr).then(res => {
        this.$message.success('操作成功');
        this.cancel();
        this.$emit('callBack');
      }).finally(() => {
        this.buttonLoading = false;
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.dataList = [];
    },
    // 判断是否禁选
    rowSelectable (row, index) {
      return row.status == null || row.status == '00' || row.status == '33';
    },
    // 是否可操作
    canOperation () {
      return this.reportStatus == '00' || this.reportStatus == '33';
    },
  },
};
</script>
<style lang="scss" scoped>
.header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  font-size: 20px;
  font-weight: 700;
}
</style>
